<template>
	<view class="share-info">
		<uni-nav-bar left-icon="back" left-text='分享有礼' fixed="true" color="white" statusBar="true"
			backgroundColor="transparent" />
		<view class="share flexv">


			<image :src="back"
				style="min-height:100vh;position:absolute;z-index:-1;left:0;width: 100%;"></image>
			<!-- 战绩 -->
		
            <view class="my-record flexv">
					<view class="record-box flex">
						<view class="record-box-item flex1 flexv flexc">
							<text>邀请好友</text>
							<view class="flex item-box"><text>{{num?num: '0'}}</text>人</view>
						</view>
						<view class="record-box-item flex1 flexv flexc">
							<text>下单成功好友</text>
							<view class="flex item-box"><text>{{buynum?buynum:'0'}}</text>人</view>
						</view>
					</view>
				</view>
			<!-- 简介 -->
			<view class="note flexv mt2">
				
				
				
				<!-- <image src="/assets/img/share-title-ico.png" class="note-title"></image> -->
				<view class="note-box flex mt2">
					<view class="item-box flex1 flexv">
						<text class="tc white point">1</text>
						<text class="mt2 tc">发送邀请给好友</text>
					</view>
					<view class="item-box flex1 flexv center">
						<text class="tc white point">2</text>
						<text class="mt2 tc">好友登录或下单成功</text>
					</view>
					<view class="item-box flex1 flexv">
						<text class="tc white point">3</text>
						<text class="mt2 tc">领取奖励</text>
					</view>
				</view>
			</view>

			<!-- 分享按钮 -->
			<view class="share-btn tc white" @click="share">立即分享</view>

			<!-- 分享 -->
			<view class="shadow" v-if="show" @click="show=false"></view>
			<view class="share-pop flexv" v-if="show">
				<image class="close-btn" @click="show=false" src="@/static/img/class_icon_tc.png"></image>
				<view class="acts-box flex1 flex">
					<button class="flex1 flexv act ali-c" open-type="share"
						style="height: 100%; justify-content: flex-start;padding:0; font-weight:normal;">
						<image src="@/static/img/weixin.png"></image>
						<text class="cor-grey">微信好友</text>
					</button>
					<view class="flex1 flexv ali-c act" @click="poster">
						<image src="@/static/img/weixin.png"></image>
						<text class="cor-grey">生成海报</text>
					</view>
				</view>
			</view>

			<canvas canvas-id="myCanvas"
				style="width: 270px; height: 330px;position:fixed;top:-500%;left:-500%;"></canvas>

		</view>
		<canvas id="qrcode" canvas-id="qrcode" style="width: 60px;height: 60px;position: fixed;right: -100%;" />


	</view>
	</view>
</template>

<script>
	import uqrcode from './uqrcode.js';
	const app = getApp().globalData;
	export default {

		data() {
			return {
				imgRemote:getApp().globalData.imgRemote,
				showit: true, // 是否显示
				show: false, // 显示分享弹窗？
				buynum: 0, // 下单人数
				invitenum: 0, // 邀请人数
				rules: null, // 规则
				posterUrl: '', // 绘制完成的海报
				imgURL: '', // 分享海报的商品图片
				share_bg: '', // 分享背景图
				userImg: '', //用户头像
				code: '',
				userInfo: {},
				uid: '',
				num: 0,
				canvasQrPath: '',
				text: '12',
				size: 200,
				colorDark: '#ff0000',
				colorLight: '#ffffff',
				back:''
			}
		},
		onLoad() {
			this.invite();
			this.init();
		},
		methods: {
			invite() {
				this.$get(this.$api.dInvitation, {}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.num = data.data.count;
						this.back=data.data.img;
						this.buynum=data.data.buy;
						
						wx.getImageInfo({
							src: data.data.img,
							success(das) {
								this.imgURL = das.path;
							}
						})
						
					}
				})
			},
			init() {
				let _ = this;
				_.$get(_.$api.userInfo, {}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						_.userInfo = data.data;
						wx.getImageInfo({
							src: data.data.avatar,
							success(das) {
								_.userImg = das.path;
							
							}
						})
					
					wx.getImageInfo({
						src: data.data.url,
						success(das) {
							_.code = das.path;
						
						}
					})
					        
					
						/* uqrcode.make({
								canvasId: 'qrcode',
								componentInstance: this,
								size: 60,
								text:  _.imgRemote+'?id=1' + _.userInfo.id,
								fileType: 'png',
								errorCorrectLevel: uqrcode.errorCorrectLevel.H
							})
							.then(res1 => {
								_.code = res1.tempFilePath;
							}) */
						

					}
				})
			},
			// 分享按钮
			share() {
				this.show = true;
				this.getShare()

			},
			// 获取海报
			getShare() {
				
				let name=getApp().globalData.name;
				
				let that = this;
				// console.log(that.userImg);
				// console.log(that.code);
				let ctx = wx.createCanvasContext('myCanvas');
				// 设置商品图片
				ctx.drawImage(that.imgURL, 0, 0, Math.floor(270), Math.floor(600))
				ctx.setFillStyle('white');
				ctx.fillRect(0, Math.floor(252), Math.floor(270), Math.floor(80));
				// 设置用户头像
				ctx.drawImage(that.userImg, Math.floor(196), Math.floor(257), 66, 66)
				// 设置小程序码
				ctx.drawImage(that.code, Math.floor(8), Math.floor(260), 60, 60)
				// 设置扫码提示图片
				ctx.drawImage('../../static/img/easyBuy1.png', Math.floor(80), Math.floor(310), Math
					.floor(110), Math.floor(15))
				ctx.setTextAlign('left') //设置文字要垂直居中

				ctx.setFillStyle('#333') //字体颜色

				ctx.setFontSize(10) //字体大小

				ctx.fillText(that.userInfo.nickname, Math.floor(80), Math.floor(275))
				ctx.fillText(name+",共享购物时光", Math.floor(80), Math.floor(295));

				ctx.draw()

				//将画布转化成图片
				let timmm = setTimeout(() => {
					wx.canvasToTempFilePath({
						canvasId: "myCanvas",
						fileType: 'jpg',
						success(daa) {
							wx.hideLoading();
							that.posterUrl = daa.tempFilePath;
						},
						fail(err) {
							wx.hideLoading();
							wx.showToast({
								title: '生成错误，请重试！',
								icon: 'none'
							})
						}
					})
				}, 500)

			},
			//显示海报
			poster() {
				let urls = [];
				urls.push(this.posterUrl);
				wx.previewImage({
					current: urls[0],
					urls: urls,
				})

			},
		},
		onShareAppMessage() {
			this.show = false;
			return {
				// seller_id
				// title: this.ware.name,
				path: '/pages/tabar/index?id=' + this.userInfo.id
				// imageUrl: this.imgRemote + this.ware.main_image
			}
		}
	}
</script>

<style scoped lang="scss">
	.text {
		background-color: #f3f3f3;
		margin: 24rpx;
		padding: 24rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.text text {
		font-weight: 700;
		margin-left: 16rpx;
	}

	.share-info /deep/ .uni-navbar--border {
		border: none;
	}

	@import '/static/css/comon.css';

	.share {
		min-height: 100vh;
		padding: 0 24rpx;
		position: absolute;
		top: 0;
		width: 100vw;
	}

	/* 规则按钮 */
	.rule-btn {
		width: 160rpx;
		height: 66rpx;
		position: fixed;
		z-index: 100;
		top: 37rpx;
		right: 0;
		font-size: 30rpx;
		line-height: 66rpx;
		background-color: #9550FB;
		border-radius: 33rpx 0 0 33rpx;
	}

	/* 我的战绩 */
	.my-record {
		margin-top: 610rpx;
		font-size: 30rpx;
		color: #b97f43;
		border-radius: 20rpx;
		background-color: #ffffff;
	}

	.my-record .title {
		width: 340rpx;
		height: 36rpx;
		margin: 0 auto;
	}

	.my-record .record-box {
		width: 100%;
		height: 244rpx;
	//	background: url('https://fywjd.jxsxkeji.com/data/Wecheat/record-title-ico.png') no-repeat center;
		background-size: 100% 244rpx;
		position: relative;
	}

	.my-record .record-box::after {
		content: "";
		width: 1rpx;
		height: 118rpx;
		background: linear-gradient(#feebe0, #fda281, #feebe0);
		position: absolute;
		left: 50%;
		top: 90rpx;
	}

	.my-record .record-box .record-box-item {
		//margin-top: 34rpx;
		line-height: 120%;
	}

	.my-record .record-box .record-box-item .item-box {
		margin-top: 20rpx;
		line-height: 120%;
	}

	.my-record .record-box .record-box-item .item-box text {
		line-height: 120%;
		color: #ff3c34;
	}

	/* 简介 */
	.note {
		width: 100%;
		font-size: 30rpx;
		color: #b97f43;
	}

	.note .note-title {
		width: 423rpx;
		height: 36rpx;
		margin: 20rpx auto 0;
	}

	.note .note-box {
		width: 100%;
		height: 254rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.note .note-box .item-box {
		padding: 0 20rpx;
		font-size: 30rpx;
		line-height: 120%;
		color: #b97f43;
	}

	.note .note-box .item-box.center {
		position: relative;
	}

	.note .note-box .item-box.center::before {
		content: "";
		width: 190rpx;
		height: 1rpx;
		position: absolute;
		z-index: 10;
		top: 78rpx;
		left: -98rpx;
		border-bottom: 1rpx dashed #b97f43;
	}

	.note .note-box .item-box.center::after {
		content: "";
		width: 190rpx;
		height: 1rpx;
		position: absolute;
		z-index: 10;
		top: 78rpx;
		right: -98rpx;
		border-bottom: 1rpx dashed #b97f43;
	}

	.note .note-box .item-box .point {
		width: 48rpx;
		height: 48rpx;
		margin: 56rpx auto 0;
		border-radius: 100%;
		line-height: 48rpx;
		background-color: #be7e44;
		position: relative;
		z-index: 20;
	}

	.share-btn {
		width: 100%;
		height: 90rpx;
		margin: 60rpx 0 54rpx;
		font-size: 36rpx;
		line-height: 90rpx;
		border-radius: 54rpx;
		background: #fd6732;
		background-size: 100% 100rpx;
	}

	/* 弹窗 */
	.shadow {
		width: 100%;
		min-height: 100vh;
		position: absolute;
		z-index: 100;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.share-pop {
		width: 100%;
		height: 484rpx;
		padding: 20rpx;
		position: fixed;
		z-index: 200;
		bottom: -500%;
		left: 0;
		right: 0;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		animation: show forwards 0.2s;
	}

	@keyframes show {
		from {
			bottom: -500%
		}

		to {
			bottom: 0
		}
	}

	.share-pop .close-btn {
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx 20rpx 0 auto;
	}

	.share-pop .acts-box .act {
		background-color: transparent;
		border: none;
	}

	.share-pop .acts-box .act::after {
		width: 0;
		height: 0;
		display: none
	}

	.share-pop .acts-box image {
		width: 90rpx;
		height: 90rpx;
		margin: 80rpx auto 0;
	}

	.share-pop .acts-box text {
		margin-top: 20rpx;
		font-size: 30rpx;
		line-height: 120%;
	}


	/* 分享海报样板弹窗 */
	.share-poster-box {
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.share-poster-box .share-poster {
		margin: auto;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
	}

	.share-poster-box .share-poster .posters {
		width: 440rpx;
		height: 440rpx;
		margin: auto;
		border-radius: 20rpx;
	}

	.share-poster-box .share-poster .user-infos {
		padding: 20rpx;
		border-top: 1rpx solid #ddd;
	}

	.share-poster-box .share-poster .user-infos .user-ico {
		width: 120rpx;
		height: 120rpx;
		/* border-radius: 100%; */
	}

	.share-poster-box .share-poster .user-infos .user-name {
		margin-left: 20rpx;
		font-size: 28rpx;
		line-height: 120%;
		color: #333;
	}
</style>
